<!-- 
   
   css介绍
      => 概念：层叠样式表或级联样式表
      => 作用：html 实现网页的内容
               css: 实现网页外观，用于美化网页
               
      => 语法:
              选择器{
                 样式名1：样式值1
                 样式名2：样式值2
              }
      => 小结: 学习css其实就是学习选择器和样式

    选择器
       => 选中html标签元素的方式
       => 选择器分类
          + 基础选择器
            - 标签选择器
            - ID选择器
            - class类选择器
          怎么选择基础选择器
             给不同标签设置相同样式使用class类选择器
             给相同标签设置样式，使用标签选择器
             给唯一确定的标签设置样式使用ID选择器
          + 层次选择器
             M   N    后代选择器:   选中M选择器下，名为N的所有后代选择器
             M > N    子代选择器    
             M ~ N    通用兄弟
             M + N    相邻兄弟

            M和N表示某个选择器

            问题： 选中id属性值为d1的后代h2?
              #d1 h2

          + 属性选择器
         
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <!-- 在style标签中写样式 -->
    <style>
        /* #d1>h2 {
            color: red;
        }

        #d1 p {
            font-size: 28px;
            background-color: blueviolet;
        } */

        #d2~p{
            color: pink;
        }
       
    </style>
</head>

<body>
    <div id="d1">
        <p>儿子元素一</p>
        <h2>儿子元素二</h2>
        <div id="d2">
            <p>孙子元素一</p>
            <h2>孙子元素二</h2>
        </div>
        <h2>儿子元素二</h2>
        <p>儿子元素一</p>
    </div>
</body>

</html>